<script src="/static/asserts/require.js"></script>
<div class="form-group">
    <label class="col-sm-2 control-label"> {{ label }}</label>
    <div class="col-sm-10" style="height: 200px" name="id_editor"
         id="id_{{ id }}_editor"></div>
    <textarea id="id_{{ id }}" name="{{ id }}"
              style="display: none">{{ content }}</textarea>
</div>

<script>
    var id_{{ id }}_editor;
    require.config({paths: {ace: "/static/asserts/ace/lib/ace"}})
    define('editor', ['ace/ace'],
        function (ace, langtools) {
            id_{{ id }}_editor = ace.edit("id_{{ id }}_editor");
            id_{{ id }}_editor.setTheme("ace/theme/xcode");
            {% ifequal language_type 0  %}
                id_{{ id }}_editor.session.setMode("ace/mode/yaml");
            {% endifequal %}
            {% ifequal language_type 1  %}
                id_{{ id }}_editor.session.setMode("ace/mode/sh");
            {% endifequal %}
            {% ifequal language_type 2  %}
                id_{{ id }}_editor.session.setMode("ace/mode/powershell");
            {% endifequal %}
            {% ifequal language_type 3  %}
                id_{{ id }}_editor.session.setMode("ace/mode/python");
            {% endifequal %}
            {% ifequal language_type 4  %}
                id_{{ id }}_editor.session.setMode("ace/mode/plain_text");
            {% endifequal %}
            {% ifequal language_type 5  %}
                id_{{ id }}_editor.session.setMode("ace/mode/plain_text");
            {% endifequal %}
            id_{{ id }}_editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true,
            });
            {% ifequal readonly True  %}
                id_{{ id }}_editor.setReadOnly(true);
            {% endifequal %}
            require(["ace/requirejs/text!src/ace"], function (e) {
                id_{{ id }}_editor.setValue($('#id_{{ id }}').val());
            })
        }
    );
    require(['editor'])

</script>